<template>
	<view>
		<view class="cu-modal bottom-modal" :class="show ? 'show' : ''" @click="close">
			<view class="cu-dialog" @click.stop="() => {}">
				<view class="cu-bar bg-white justify-end">
					<view class="content">我的菜单栏</view>
					<view class="action" @click="close">
						<text class="cuIcon-close"></text>
					</view>
				</view>
				<view class="padding-sm content">
					<view class="padding-lr-xs">
						<view class="flex align-start">
							<image @click="showEditBottom" class="cu-avatar lg chat-avatar" :src="userInfo.avatar">
								<view class="flex flex-direction align-start margin-xs margin-left">
									<view @click="showEditBottom">{{userInfo.nickName}}</view>
									<view @click="usernameSimple && $squni.copy(usernameSimple)">ID：
										<text class="text-bold">{{ usernameSimple || '尚未登录' }}</text>
										<text class="cuIcon-copy text-cyan margin-left-xs"></text>
									</view>
								</view>
						</view>
						<view class="flex align-start margin-top">
							<view class="cu-capsule">
								<view class='cu-tag radius bg-gradual-blue'>拥有额度</view>
								<view class="cu-tag line-blue">{{ chatAsset.n || 0 }}次</view>
							</view>
							<view class="cu-capsule">
								<view class='cu-tag radius bg-gradual-blue'>每日免费剩余额度</view>
								<view class="cu-tag line-blue">{{ chatAsset.dfn || 0 }}次</view>
							</view>
						</view>
						<!-- <view class="flex justify-between align-center margin-top">
							<view class="flex flex-direction align-start">
								<view class="text-bold">邀请新的小伙伴来体验</view>
								<view class="padding-tb-xs">奖励 10 次/人，每天最多 5 人</view>
								<view class="text-xs text-gray">提示：点击右上角···可分享给朋友进行邀请</view>
							</view>
							<view>
								<button class="cu-btn lines-cyan round" open-type="share">邀请朋友</button>
							</view>
						</view>
						<view class="flex justify-between align-center margin-top">
							<view class="flex flex-direction align-start">
								<view class="text-bold padding-bottom-sm">看视频广告攒次数</view>
								<view>奖励 3 次/个，每天最多看 10 次</view>
							</view>
							<button class="cu-btn lines-cyan round" @click="$squni.toast('功能完善中，敬请期待~')">观看视频</button>
						</view> -->
					</view>
					<view>
						<view class="cu-list no-border grid col-4">
							<view class="cu-item" v-for="(item,index) in cuIconList" :key="index"
								@click="navigateTo(item)">
								<view class="func-list">
									<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color, 'func-icon']"></view>
									<text>{{item.name}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<bottom-drawer style="height: 300rpx;" v-model="showEdit" title="更新用户信息">
			<view style="padding-top:20rpx; height: 300rpx;">
				<!-- <image @click="showEditBottom" class="cu-avatar lg chat-avatar" :src="userInfo.avatar"> -->
				<view style="">
					<button class="cu-avatar xl chat-avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image class="cu-avatar xl chat-avatar" :src="avatarUrl"></image>
					</button>
				</view>
				<view style="margin-top: 20rpx;">
					<input type="nickname" class="weui-input" placeholder="请输入昵称" v-model="this.nickName"
						@change="onChangeNickname" />
				</view>
				<view style="margin-top: 20rpx;width: 150rpx;border-radius: 5px;" class="cu-btn bg-blue shadow"
					@click="changeUserInfo">更新</view>
			</view>
		</bottom-drawer>
		<bottom-drawer v-model="showVip" title="对话模版">
			<view>
				<view class="argin-tb-xl">暂未开放</view>
				<!-- <image src="https://cdn7.aezo.cn/common/qrcode/ayz_qrcode.jpg" mode="aspectFit" width="100" height="100"></image> -->
			</view>
		</bottom-drawer>
		<bottom-drawer v-model="showCustomer" title="个人中心">
			<view>
				<view class="argin-tb-xl">暂未开放</view>
				<!-- <image src="https://cdn7.aezo.cn/common/qrcode/ayz_qrcode.jpg" mode="aspectFit" width="100" height="100"></image> -->
			</view>
		</bottom-drawer>
	</view>
</template>

<script>
	import BottomDrawer from '@/components/bottom-drawer/bottom-drawer.vue'
	import {
		mapGetters
	} from 'vuex'
	import {
		updateUserInfo,
		clearChatHis
	} from '@/api/chat.js'
	export default {
		components: {
			BottomDrawer
		},
		props: {
			chatAsset: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				avatarUrl: '',
				nickName: '',
				show: true,
				showVip: false,
				showNum: false,
				showCustomer: false,
				showEdit: false,
				cuIconList: [
					// {
					// 	cuIcon: 'apps',
					// 	color: 'orange',
					// 	name: '对话模版',
					// 	callback: () => {
					// 		this.showVip = true
					// 	}
					// },
					{
						cuIcon: 'comment',
						color: 'blue',
						name: '对话历史',
						callback: () => {
							this.$squni.navigateTo('/pages/main/history')
						}
					},
					// {
					// 	cuIcon: 'people',
					// 	color: 'cyan',
					// 	name: '个人中心',
					// 	callback: () => {
					// 		this.showCustomer = true
					// 	}
					// },
					{
						cuIcon: 'delete',
						color: 'red',
						name: '清除历史',
						callback: () => {
							wx.showModal({
								title: '提示',
								content: '确定清除历史吗？',
								success: function() {
									clearChatHis().then(res => {
										if (res.status === 'success') {
											wx.showToast({
												title: '清除历史成功',
												icon: 'success'
											})
										} else {
											wx.showToast({
												title: '清除历史失败',
												icon: 'error'
											})
										}
									})
								}
							})
							// this.$squni.setStorageSync('chatHistory', [])
							// this.$squni.toast('清除记忆成功', 'success')
						}
					},
				]
			};
		},
		computed: {
			...mapGetters([
				'userInfo',
				'usernameSimple'
			]),
			showFuncList() {
				// this.avatarUrl = this.userInfo.avatar ;
				return this.showVip || this.showNum || this.showCustomer
			}
		},
		created() {
			console.log("created")
			this.avatarUrl = this.userInfo.avatar
			this.nickName = this.userInfo.nickName
			console.log("this.nickName: " + this.nickName)
			console.log("this.userInfo.nickName: " + this.userInfo.nickName)
		},
		watch: {
			showFuncList(n, o) {
				if (n !== o) {
					this.show = !n
				}
			}
		},
		methods: {
			onChangeNickname(e) {
				const getNickName = e.detail.value
				console.info("value:" + getNickName)
				if (getNickName) {
					this.nickName = getNickName
				}
			},
			showEditBottom() {
				this.showEdit = true;
			},
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail
				this.avatarUrl = avatarUrl
			},
			changeUserInfo() {
				if (this.nickName == this.userInfo.nickName && this.avatarUrl == this.userInfo.avatar) {
					console.info("userInfo信息未修改")
					this.$squni.toast('信息未修改', 'success')
					this.showEdit = false
				} else {
					this.userInfo.nickName = this.nickName
					this.userInfo.avatar = this.avatarUrl
					updateUserInfo(this.userInfo).then(res => {
						if (res.status === 'success') {
							this.$squni.toast('更新成功', 'success')
							this.showEdit = false
						} else {
							this.$squni.toast('更新失败', 'failure')
							this.showEdit = false
						}
					})
				}
			},
			open() {
				this.show = true;
			},
			close() {
				this.show = false;
			},
			navigateTo(item) {
				if (item.callback) {
					item.callback(item)
				} else {
					uni.navigateTo({
						url: item.page
					})
				}
			}
		}
	};
</script>

<style>
	.cu-dialog {
		border-radius: 20upx 20upx 0 0;
	}

	.content {
		background-color: #fff;
		padding-top: 16upx;
	}

	.cu-bar .content {
		color: #333333;
		font-weight: 700;
	}

	.cu-list {
		margin-bottom: 20upx;
	}

	.cu-list .func-list {
		margin: 0upx 20upx -20upx 0;
	}

	.cu-list .func-list .func-icon {
		border: 1px solid #eee;
		border-radius: 8upx;
		padding: 30upx;
		font-size: 80upx;
	}
</style>